<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*body会有一个默认的外边距margin,可以修改*/
            margin: 0;
        }
        #box{

            width: 300px;
            /*border: 1px solid red; 粗细，样式（实线虚线） 颜色*/
            /*外边距的妙用： 居中元素margin: 0 auto;*/
            border: 2px solid red;
            margin: 0 auto;
        }
        /*margin 顺时针旋转
         margin:0
         margin:0 ，10px
         margin:0 ，10px,2px,20px
        */
        h2{
            font-size: 15px;
            background-color: #969896;
            line-height: 30px;
            color: white;
            margin-top: 0;
        }
        form{
            background: #4158D0;
        }
        /*div下的第一个input标签*/
        div:nth-of-type(1) input{
            border: 2px solid red;
        }
        div:nth-of-type(2) input{
            border: 2px dashed #145e93;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>